<script lang="ts" setup>
import { ref, useTemplateRef, inject } from 'vue'
import type { Swiper, SwiperOptions } from 'swiper/types'
import { Navigation } from 'swiper/modules'
import { getImgSrc } from '@/views/product/reno14-pro/image/2/img-src.ts'
import { navBarHeightKey } from '@/views/product/reno14-pro/symbol-key.ts'
import { gsap } from 'gsap'
import { useGsapContext } from '@/hooks'
import { useScrollGroup } from '@/hooks/reno14-pro.ts'

const navBarHeight = inject(navBarHeightKey)
const { scrollGroup } = useScrollGroup()

const containerRef = useTemplateRef<HTMLElement | null>('containerRef')
useGsapContext(async () => {
  if (!containerRef.value) {
    return
  }

  const defaultScrollTrigger = {
    scrub: true,
    start: () => `top bottom`,
    end: () => `bottom ${navBarHeight?.value}`,
    invalidateOnRefresh: true,
    ...scrollGroup,
  }

  const img2 = containerRef.value!.querySelector(
    '.middle-content > ._item:nth-child(2) picture._picture img',
  ) as HTMLImageElement | null
  gsap.fromTo(
    img2,
    {
      yPercent: -25,
    },
    {
      yPercent: 0,
      scrollTrigger: {
        ...defaultScrollTrigger,
        trigger: img2,
      },
    },
  )

  const img3 = containerRef.value!.querySelector(
    '.middle-content > ._item:nth-child(3) picture._picture img',
  ) as HTMLImageElement | null
  gsap.fromTo(
    img3,
    {
      yPercent: -25,
    },
    {
      yPercent: 0,
      scrollTrigger: {
        ...defaultScrollTrigger,
        trigger: img3,
      },
    },
  )
})

const swiperProps = ref<SwiperOptions>({
  spaceBetween: 0,
  slidesPerView: 'auto',
  loop: true,
  modules: [Navigation],
  navigation: {
    enabled: false,
  },
})

const swiperItem = [
  {
    content: {
      p1: '全系超窄边直屏',
      p2: '正脸好看到没边，',
      p3: '只一眼就心动。',
    },
  },
  {
    content: {
      p1: '全系质感金属中框',
      p2: '够精致够坚固，3 倍强韧抗压，',
      p3: '1.36 倍抗弯折',
    },
  },
  {
    content: {
      p1: '全系一体式冷雕玻璃',
      p2: '美得天衣无“缝”，',
      p3: '又精致又防尘。',
    },
  },
] as const

const currentIndex = ref(1)
const swiperRef = useTemplateRef<(HTMLElement & { swiper: Swiper }) | null>('swiperRef')
const slideChange = () => {
  if (!swiperRef.value) {
    return
  }

  currentIndex.value = swiperRef.value.swiper.realIndex + 1
}
const preSlide = () => {
  if (!swiperRef.value) {
    return
  }

  swiperRef.value.swiper.slidePrev()
}
const nextSlide = () => {
  if (!swiperRef.value) {
    return
  }

  swiperRef.value.swiper.slideNext()
}

const divItemData = [
  {
    content: {
      h2: '能量充盈 机身轻盈',
      p: '6200mAh 长续航，薄至 7.48mm、轻至201g，让轻薄长续航兼得，好手感称手更称心。',
    },
    image: {
      360: getImgSrc('images-circle-img-3-mo.jpg'),
      640: getImgSrc('images-circle-img-3-pad.jpg'),
      1024: getImgSrc('images-circle-img-3-d7111.jpg.webp'),
      1440: getImgSrc('images-circle-img-3-1.jpg.webp'),
    },
  },
  {
    content: {
      h2: '满级防水防尘',
      p: 'IP69 & IP68 & IP66 防水大满贯，让水逆速退，雨季沙尘天都不带怕。还能秒变水下相机，拍出人鱼大片。',
    },
    image: {
      360: getImgSrc('images-circle-img-4-mo.jpg'),
      640: getImgSrc('images-circle-img-4-pad-1.jpg.webp'),
      1024: getImgSrc('images-circle-img-4-d7111-95.jpg.webp'),
      1440: getImgSrc('images-circle-img-4-1-95.jpg.webp'),
    },
  },
] as const
</script>

<template>
  <div ref="containerRef" class="pc-container-content-1312-grid">
    <div class="middle-content">
      <div class="_item">
        <div class="text-area">
          <h2 class="">360º 美得无死角</h2>
          <p class="">无论正脸侧颜背面，全方位颜值在线。目之所及，手之所触，满满全是精致感。</p>
        </div>

        <div class="item1-swiper">
          <swiper-container
            ref="swiperRef"
            class="mySwiper"
            v-bind="swiperProps"
            @swiperslidechangetransitionend="slideChange"
          >
            <swiper-slide v-for="(item, k) in swiperItem" :key="k" class="box">
              <picture>
                <source
                  media="(min-width: 1536px)"
                  srcset="@/views/product/reno14-pro/image/2/images-circle-img-0.jpg"
                />
                <source
                  media="(min-width: 1024px)"
                  srcset="@/views/product/reno14-pro/image/2/images-circle-img-0.jpg"
                />
                <source
                  media="(min-width: 640px)"
                  srcset="@/views/product/reno14-pro/image/2/images-circle-img-0-pad.jpg"
                />
                <img
                  class="w-full h-full object-cover"
                  src="@/views/product/reno14-pro/image/2/images-circle-img-0-mo.jpg"
                  alt=""
                  loading="lazy"
                />
              </picture>

              <div class="desc">
                <div class="max-md:mb-[1.875rem]">
                  <h2 class="text-2xl mb-[0.625rem] md:mb-[0.5rem]">{{ item.content.p1 }}</h2>
                  <p class="text-sm max-md:text-center">{{ item.content.p2 }}</p>
                  <p class="text-sm max-md:text-center">{{ item.content.p3 }}</p>
                </div>
              </div>
            </swiper-slide>
          </swiper-container>

          <div class="controller">
            <div class="rounded-full bg-[#00000014] opacity-80" @click="preSlide">
              <svg class="w-[2.25rem] aspect-square">
                <use href="#icon-com-arrow-left-circle" />
              </svg>
            </div>
            <p class="text-lg">
              <span class="inline-block w-[0.75rem]">{{ currentIndex }}</span>
              <span>/{{ swiperItem.length }}</span>
            </p>
            <div class="rounded-full bg-[#00000014] opacity-80" @click="nextSlide">
              <svg class="w-[2.25rem] aspect-square">
                <use href="#icon-com-arrow-right-circle" />
              </svg>
            </div>
          </div>
        </div>
      </div>

      <div v-for="(item, k) in divItemData" :key="k" class="_item overflow-hidden">
        <div class="text-area">
          <h2 class="text-3xl">{{ item.content.h2 }}</h2>
          <p class="text-base">{{ item.content.p }}</p>
        </div>

        <picture class="_picture">
          <source :srcset="item.image['1440']" media="(min-width: 1536px)" />
          <source :srcset="item.image['1024']" media="(min-width: 1024px)" />
          <source :srcset="item.image['640']" media="(min-width: 640px)" />
          <img :src="item.image['360']" alt="" class="w-full h-full object-cover" loading="lazy" />
        </picture>
      </div>
    </div>
  </div>
</template>

<style scoped>
@reference "@/assets/main.css";

.middle-content {
  @apply my-[13.48vw] space-y-[4.65vw]

  md:my-[3rem] max-lg:space-y-[1rem]

  lg:space-y-[0.5rem] lg:my-[clamp(3.3125rem,1.0857rem+3.4794vw,5rem)];

  ._item {
    @apply bg-white w-full rounded-sm

    md:rounded-md

    lg:rounded-lg lg:grid lg:grid-cols-[1fr_clamp(32.3125rem,11.4465rem+32.6031vw,48.125rem)] lg:h-[clamp(20.125rem,7.0941rem+20.3608vw,30rem)] lg:grid-rows-[100%];

    .text-area {
      @apply py-[6.55vw] px-[5.6vw]

      md:p-[1.5rem] md:flex md:justify-between

      lg:flex-col
      lg:px-[clamp(1.125rem,0.3003rem+1.2887vw,1.75rem)] lg:py-[clamp(1.5rem,0.5103rem+1.5464vw,2.25rem)];

      h2 {
        @apply text-3xl mb-[1.375rem]

        md:mb-0

        lg:text-[clamp(1.875rem,0.3905rem+2.3196vw,3rem)];
      }
      p {
        @apply text-base

        md:w-[21.25rem]

        lg:text-lg;
      }
    }

    picture._picture {
      @apply block h-[59.54vw] lg:h-full;
    }
  }

  & > ._item picture._picture {
    @apply overflow-hidden

    md:block md:h-[45.83vw] lg:h-full;

    img {
      @apply w-full h-[120%];
    }
  }

  & > ._item:nth-child(2) {
    @apply lg:grid-cols-[clamp(32.3125rem,11.4465rem+32.6031vw,48.125rem)_1fr];

    div.text-area {
      grid-column: 2 / 3;
      grid-row: 1;
    }
    picture._picture {
      grid-column: 1 / 2;
      grid-row: 1;
    }
  }
}

.item1-swiper {
  @apply relative flow-root

  md:h-[45.83vw]

  lg:h-full;

  .mySwiper {
    @apply w-full max-w-full md:h-full;

    .box {
      @apply w-full max-w-full relative;

      picture {
        @apply block max-md:h-[61.8vw] md:h-full lg:w-full;

        img {
          @apply lg:w-full;
        }
      }

      .desc {
        @apply mt-[4.7vw] grid justify-center

        md:absolute md:bottom-[1.5rem] md:left-[1.5rem];
      }
    }
  }

  .controller {
    @apply flex justify-center items-center gap-[1.45rem]

    max-md:mb-[4.7vw]
    md:absolute md:bottom-[1.5rem] md:right-[1.5rem] md:z-1;
  }
}
</style>
